<template>
  <div class="header">
    <div class="area header_wrapper">
      <div class="left-area">
        <h1 class="logo">
          <img src="../../assets/img/logo/Biglogo.png" alt="" />
        </h1>
        <ul class="nav-list" style="margin-left: 100px">
          <template v-for="navItem in navLists" :key="navItem.id">
            <!-- active -->
            <li class="item" @click="handleClick(navItem.routeName)">
              <div class="itemBox">
                <div class="navName">
                  <!-- <el-icon class="icon"><Phone /></el-icon> -->
                  <el-icon
                    v-if="navItem.icon"
                    class="icon"
                    size="18px"
                    :color="navItem.icon.iconColor"
                  >
                    <component :is="navItem.icon.iconName" />
                  </el-icon>
                  <i>{{ navItem.navName }}</i>
                </div>
                <span class="desc"> {{ navItem.navNameE }}</span>
              </div>
            </li>
          </template>
        </ul>
      </div>
      <div class="right-area" @click="routerJumpByUserInfo">
        <span class="image" href="#">
          <img src="/src/assets/img/logo/logo.png" alt="" />
        </span>
        <div class="info">
          <template v-if="!userInfo">
            <span class="notLogin">欢迎登录</span>
            <p>加入预约管理之旅</p>
          </template>
          <template v-else>
            <span class="hasLogin">尊敬的用户</span>
            <p>预约管理-开启学习</p>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import navLists from "@/global/navlists"
import useRouterJump from "@/hooks/useRouterJump"

const emit = defineEmits(["handleClickByNullRouter"])

const { userInfo, routerJump, routerJumpByUserInfo } = useRouterJump()

/**
 * 导航栏点击事件
 */
function handleClick(routeName) {
  if (routeName) {
    routerJump("push", routeName)
  } else {
    console.log("routeName为null。做其他业务逻辑")
    emit("handleClickByNullRouter")
  }
}
</script>

<script lang="ts"></script>

<style lang="less" scoped>
.header {
  width: 100%;
  // overflow-y: hidden;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.7);
}

.header .area {
  display: flex;
  justify-content: space-between;
  height: 84px;
}

.header .left-area {
  display: flex;
}

/*SEO优化*/
.header .left-area .logo a {
  position: relative;
  top: 50%;
  transform: translate(0, -50%);
  display: block;
  width: 200px;
  height: 54px;
  text-indent: -9999px;
  background: url(../../assets/img/logo/Logo-White4) no-repeat center center;
}

.header .left-area .logo {
  height: 85px;
}

.header .left-area .logo img {
  width: 176px;
  height: 76px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.header .left-area .nav-list {
  display: flex;
  margin-left: 50px;
}

.header .left-area .nav-list .item {
  width: 120px;
  padding-right: 5px;
}

.header .left-area .nav-list .item:hover,
.header .left-area .nav-list .item.active {
  /* background: url(../../assets/img/logo/logo4.png) no-repeat 0 0/25%; */
}

.header .left-area .nav-list .item .itemBox {
  display: block;
  height: 100%;
  box-sizing: border-box;
  padding-top: 20px;
  font-size: 18px;
  color: #c9c9dd;
  text-align: center;
}
.header .left-area .nav-list .item .itemBox .navName {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
}

.header .left-area .nav-list .item .itemBox .navName .icon {
  margin-right: 4px;
}

.header .left-area .nav-list .item:hover .itemBox,
.header .left-area .nav-list .item.active .itemBox {
  color: #e4b653;
}

.header .left-area .nav-list .item .itemBox .desc {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: #858792;
}

.header .left-area .nav-list .item:hover .desc,
.header .left-area .nav-list .item.active .desc {
  color: #e96620;
}

.header .right-area {
  display: flex;
  align-items: center;
}

.header .right-area .image {
  border: 1px ridge #eee;
  border-radius: 50%;
  transform: scale(0.85);
}

.header .right-area .image img {
  // border: 1px solid #eee;
  transform: scale(0.8);
  width: 55px;
  height: 55px;
}

.header .right-area .info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 12px;
}

.header .right-area .info .notLogin {
  color: #999;
}

.header .right-area .info .hasLogin {
  color: #fff;
}

.header .right-area .info p {
  font-size: 14px;
  color: #858792;
  margin-top: 5px;
}
</style>
@/hooks/routerJump
